<template>
  <div class="app_content_container">
    <Breadcrumb :items="['云原生容器', 'ebpf系统']" />
    <div class="app_content">
      <ga-table-tool
        placeholder="按系统节点名称搜索"
        @handleSearch="handleSearch"
        @handleRefresh="fetchData"
      >
        <template v-slot:btns>
          <ga-button type="primary" @click="handleCreate">新建系统</ga-button>
        </template>
      </ga-table-tool>
      <ga-table
        row-key="id"
        :loading="loading"
        :pagination="true"
        :columns="columns"
        :data="tableData"
        :bordered="false"
        :hoverable="false"
      >
        <template #operation="{ record }">
          <OperateBtn :record="record" @fetchData="fetchData" />
        </template>
      </ga-table>
      <!-- <Pagination v-if="totalNum > 0" :total="totalNum" :page="listQuery.page" :limit="listQuery.size"
        @pagination="handlePagination" /> -->
      <createSys ref="createSysRef" :isEdit="false" @fetchData="fetchData" />
    </div>
  </div>
</template>
<script>
export default {
  name: "ContainerList"
}
</script>
<script setup>
import { ref, onMounted, reactive, h } from "vue";
import useLoading from "@/utils/loading";
import { getSystemList, fetchResourceTree } from "@/api/system.js";
import createSys from "./components/editSystem.vue"
import OperateBtn from "@/components/System/OperateBtn.vue"
import request from '@/utils/request'
import { columns } from "./column.js"
const { loading, setLoading } = useLoading(false);
const totalNum = ref(0);
const tableData = ref([
  {
    name: "ebpf测试",
    healthScore: 76,
    normalCount: 3,
    abnormalCount: 0,
    type: 1,
    requestTotalCount: 7238,
    avgResponseTime: 16.16,
    errorRate: 0,
    belongCluster: "金桥海光x86集群1",
    masterIp: "cnjq_hygon_x86cluster1",
    alarmCount: 0,
    abnormalNodes: [],
  },
]);
const listQuery = reactive({
  systemName: "",
  systemNodeName: "",
  from: "2024-08-26 08:33:50",
  to: "2024-08-26 14:33:50",
});
const createSysRef = ref();

onMounted(() => {
  fetchData();
});

// 列表
const fetchData = async () => {
  setLoading(true);
  try {
    request.get('/system/list', { params: listQuery }).then(res => {
      console.log(res, 'res');
      tableData.value = res.data
    })
  } catch (err) {
  } finally {
    setLoading(false);
  }
};
// 搜索
const handleSearch = (val) => {
  listQuery.search = val;
  fetchData();
};
// 操作分页
// const handlePagination = (val) => {
//   const { page, limit } = val;
//   listQuery.size = Number(limit);
//   listQuery.page = Number(page);
//   fetchData();
// };

const handleCreate = () => {
  createSysRef.value.open();
};

defineExpose({ fetchData });
</script>

<style lang="scss" scoped></style>
